﻿layui.define(['layer', 'carousel'], function (exports) {
    var $ = layui.jquery;
    var layer = layui.layer;
    var carousel = layui.carousel;

    // 添加步骤条dom节点
    var renderDom = function (elem, stepItems, postion,filter) {
        var stepDiv = '<div class="lay-step">';
        for (var i = 0; i < stepItems.length; i++) {
            var divStr = "<div class='step-item step-item"+filter+"'>";
            var status = stepItems[i].status;
            var mode = stepItems[i].mode;

            if (status) {
                stepDiv += divStr;
                // 线
                if (i < (stepItems.length - 1)) {
                    // if (i < postion) {
                        stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"  style = "height: 10px; margin-bottom: 10px"></i></div>';
                    // } else {
                    //     stepDiv += '<div class="step-item-tail"><i class=""  style = "height: 10px; margin-bottom: 10px"></i></div>';
                    // }
                }
                // 数字
                // var showContent = stepItems[i].showContent;
                // if (!number) {
                //     number = i + 1;
                // }
                var colorStr = "greenyellow";
                // 标题和描述
                var title = stepItems[i].title;
                var desc = stepItems[i].desc;
                var name = stepItems[i].name;
                    if (status == 1) {
                        colorStr = "red";
                        stepDiv += '<div class="step-item-head step-item-head-active laggingClick"  style = "background-color: red"><i class="layui-icon"></i></div>';
                    } else {
                        stepDiv += '<div class="step-item-head descClick" rel-name = "'+name+'"><i class="layui-icon"></i></div>';
                    }

                var interval = stepItems[i].interval;
                if (title || desc || name || interval) {
                    stepDiv += '<div class="step-item-main">';
                    if (title) {
                        stepDiv += '<div class="step-item-main-title">' + title + '</div>';
                    }
                    if (desc) {
                        stepDiv += '<div class="step-item-main-desc main-desc' + name + '" style = "display: none">' + desc + '</div>';
                    }
                    if (name) {
                        stepDiv += '<div class="step-item-main-name set-name-size">' + name + '</div>';
                    }
                    if (status == 1) {
                        if (interval) {
                            stepDiv += '<div class="step-item-main-interval" style="color: red;">' + interval + '</div>';
                        }
                    } else {
                        if (interval) {
                            stepDiv += '<div class="step-item-main-interval" style="color: greenyellow;">' + interval + '</div>';
                        }
                    }
                    stepDiv += '</div>';
                }
                stepDiv += '</div>';
            }else if(mode){
                if(mode == 'crux'){
                    var divCruxStr = "<div class='step-item step-item-crux"+filter+"'>";
                    stepDiv += divCruxStr;
                    // 线
                    if (i < (stepItems.length - 1)) {
                        // if (i < postion) {
                            stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"  style = "height: 10px;top: -28px"></i></div>';
                        // } else {
                        //     stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
                        // }
                    }
                    var id = stepItems[i].id;
                    stepDiv += '<div style = "width: 18px !important; height: 18px !important; top: -20px;background-color: #B2B2B2" class="step-item-head cruxClick" rel-id = "'+id+'"><i class="layui-icon"></i></div>';
                    stepDiv += '</div>';
                }
            }

        }
        stepDiv += '</div>';

        $(elem).prepend(stepDiv);

        // 计算每一个条目的宽度
        var bfb = 100 / stepItems.length;
        $('.step-item'+filter).css('width', bfb + '%');
        $('.step-item-crux'+filter).css('width', bfb/2+'%');

        // $('.step-item'+filter).css('width', '150px');
        // $('.step-item-crux'+filter).css('width', '75px');
    };

    var step = {
        // 渲染步骤条
        render: function (param) {
            param.indicator = 'none';  // 不显示指示器
            param.arrow = 'always';  // 始终显示箭头
            param.autoplay = false;  // 关闭自动播放
            if (!param.stepWidth) {
                param.stepWidth = '400px';
            }

            // 渲染轮播图
            carousel.render(param);
            // 渲染步骤条
            var stepItems = param.stepItems;
            renderDom(param.elem, stepItems, param.postion,param.filter);
            $('.lay-step').css('width', param.stepWidth);

            //监听轮播切换事件
            carousel.on('change(' + param.filter + ')', function (obj) {
                $(param.elem).find('.lay-step').remove();
                renderDom(param.elem, stepItems, obj.index);
                $('.lay-step').css('width', param.stepWidth);
            });

            // 隐藏左右箭头按钮
            $(param.elem).find('.layui-carousel-arrow').css('display', 'none');

            // 去掉轮播图的背景颜色
            $(param.elem).css('background-color', 'transparent');
        },
        // 下一步
        next: function (elem) {
            $(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
        },
        // 上一步
        pre: function (elem) {
            $(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
        }
    };
    layui.link('step/step-lay/step.css');
    exports('step', step);
});
